<%@page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@include file="/jsp/common/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>后台登录页面</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="${path}/statics/css/bootstrap.min.css">
  <link rel="stylesheet" href="${path}/statics/css/font-awesome.min.css">
  <link rel="stylesheet" href="${path}/statics/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="${path}/statics/css/all-skins.min.css">
  <link rel="stylesheet" href="${path}/statics/css/main.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	
  <script src="${path}/statics/libs/jquery.min.js"></script>
<script src="${path}/statics/libs/vue.min.js"></script>
<script src="${path}/statics/libs/bootstrap.min.js"></script>
<script src="${path}/statics/libs/jquery.slimscroll.min.js"></script>
<script src="${path}/statics/libs/fastclick.min.js"></script>
<%-- <script src="${path}/statics/libs/app.js"></script> --%>
<script src="${path}/statics/plugins/utils/layer/layer.js"></script>
<!-- 表单校验 -->

<script src="${path}/statics/plugins/utils/validate/jquery.js"></script>
<script src="${path}/statics/plugins/utils/validate/jquery.validate.js"></script>
  
  
</head>
<body class="hold-transition login-page">
<div class="login-box" >
  <div class="login-logo">
    <b>人人权限系统</b>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
      <p class="login-box-msg">管理员登录</p>
      <!-- <div v-if="error" class="alert alert-danger alert-dismissible">
        <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
      </div> -->
     <form id="dataForm" >
      <div class="form-group has-feedback">
        <input type="text" class="form-control" name="username" id="username" class="required" placeholder="账号">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control"  name="password" id="password" class="required" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="captcha" name="captcha" class="required"  placeholder="验证码">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <!-- captcha 的图片验证 onclick="refreshCode()" -->
      <div class="form-group has-feedback" class="verificationCodeDiv">
        <img  src="${path }/login/Kaptcha.jpg" id="verificationCode" alt="如果看不清楚，请单击图片刷新！"  class="pointer"   >
        &nbsp;&nbsp;&nbsp;&nbsp;<a id="verificationCode"  href="javascript:;" >点击刷新</a>
      </div>
      </form>
      
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="button" class="btn btn-primary btn-block btn-flat" id="tologin">登录</button>
        </div>
        <!-- /.col -->
      </div>
    <!-- /.social-auth-links -->

  </div>


<script type="text/javascript">

function requiredNotNull(id,errMsg){
	if($("#"+id).val().trim().length == 0){
		//fn.messagefn(errMsg);
		layer.open({
							  title: '提示',
							  content: errMsg,
							  time: 5000
							});
		return false;
	}
	$("#"+id).val($("#"+id).val().trim());
	return true;
}

function checkFormData(){
	return requiredNotNull("username","账号不能为空") 
	   && requiredNotNull("password","密码不能为空") 
	   && requiredNotNull("captcha","验证码不能为空") 
	   
}


	
	$(function() {
		function refreshCode(){
			
			//$(this).attr('src', '${path }/login/Kaptcha.jpg?' + Math.floor(Math.random()*100));
			//this.src = "captcha.jpg?t=" + $.now();
			$(this).attr('src', '${path }/login/Kaptcha.jpg?t='+new Date().getTime());

		}
		
		//点击刷新验证码
		$("#verificationCode").click(function(){
			//this.src = "captcha.jpg?t=" + $.now();
			//this.src = "captcha.jpg?t=" + $.now();
			
	    	//$(this).attr('src', '${path }/login/Kaptcha.jpg?t='+new Date());
	    	
			//$(this).attr('src', '${path }/login/Kaptcha.jpg' + Math.floor(Math.random()*100));
			
			//$(this).attr('src', '${path }/login/Kaptcha.jpg'+(new Date()).getTime());
			
			$(this).attr('src', '${path }/login/Kaptcha.jpg?' +(new Date()).getTime() );
	    });
		
		
		$("#tologin").click(function(){
			//if($("#dataForm").validate() == false);return;
			// $("#dataForm").validate();
			 
			if(checkFormData()){
			var formData = new FormData($("#dataForm")[0]);
			$.ajax({
				type : "POST",
				url : "${path }/login/tologin",
			//data : formData,// 你的formid
			data: {username:$("#username").val(), password:$("#password").val(), captcha:$("#captcha").val() },
				dataType : 'json',
				/* async: false,  
		        cache: false,  
		        contentType: false,  
		        processData: false,  */
				success : function(result) {
					console.log("result--" + result.code);
					if(result.code == 0){//登录成功
						window.location.href="${path }/login/toindex";//调到管理首页
					}else{
						layer.open({
							  title: '提示',
							  content: '登录后台管理系统失败',
							  time: 5000
							});
					}
					
				}
			});
			}
			
	
	    });
		
	});
	
/* var vm = new Vue({
	el:'#rrapp',
	//使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。 
	data:{
		username: '',
		password: '',
		captcha: '',
		error: false,
		errorMsg: '',
		src: 'captcha.jpg'
	},
	beforeCreate: function(){
		if(self != top){
			top.location.href = self.location.href;//当前页面
		}
	},
	methods: {
		//开始会调用这个来到后台请求到图片验证码
		refreshCode: function(){
			this.src = "captcha.jpg?t=" + $.now();
		},
		login: function (event) {	//在这里用的 onclick="login" 
			var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
			$.ajax({
				type: "POST",
			    url: "sys/login",
			    data: data,
			    dataType: "json",
			    success: function(result){
					if(result.code == 0){//登录成功
						parent.location.href ='index.html';
					}else{
						vm.error = true;
						vm.errorMsg = result.msg;
						
						vm.refreshCode();
					}
				}
			});
		}
	}
}); */
</script>
</body>
</html>
